<template>
    <div class="page-content">
        <div class="comm-content" ref="box">123</div>
    </div> 
</template>
<script>
export default {
    data() {
        return {
            myEcharts:null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    methods: {
        // 适配屏幕
        screen() {
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 6
            let options = {
                title: {
                    textStyle: { // 设置主标题样式
                        fontSize: num
                    }
                    
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },
        initEcharts(){
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            /** @type EChartsOption */
            let options = {
                title: {
                    text: '主要地区农作物种植区域占比',
                },
                legend: {
                    show: true,
                    icon: 'rect',
                    left: '2%',
                    top: '8%',
                }
            }
            this.myEcharts.setOption(options)
        },
        async getData(){
            let datalist = await this.$http('/api/TotalAreaCropsProportion')
            let dataname = datalist.data.map((item)=>{
                return {
                        name:item.name,
                        value:item.value
                    }
            })
            let res = dataname.map(item=>{
                return {
                    type:'pie',
                    center:['50%','60%'],
                    data:dataname
                }
            })
            console.log(res);
            this.setEcharts(res)
        }
        ,
        setEcharts(res){
            let options = {
                series:res
            }
            this.myEcharts.setOption(options)
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
        window.addEventListener('resize',this.screen)
        this.setEcharts()
     },
}
</script>
<style scoped></style>